import { useState } from 'react'

// 封装自定义hook
// 1.声明一个以use开头的逻辑
// 2.函数体内封装可复用的逻辑
// 3.把组件中需要使用的状态或者回调以对象或数组的形式return
// 4.在需要使用到这个逻辑的组件中执行这个函数，解构出状态和回调进行调用

// 自定义hook只能在组件或者其他自定义hook函数中使用
// useState只能在组件内部顶层使用（不能在组件外部使用）
// 不能在if，for中使用useState和自定义hook
function useToggle() {
  // 可复用的逻辑
  const [show, setShow] = useState(true)
  const toggle = () => {
    setShow(!show)
  }
  return {
    show,
    toggle,
  }
}
function App() {
  const { show, toggle } = useToggle()
  return (
    <>
      <div style={{ width: '500px', height: '500px', border: '1px solid green' }}>
        {show && <div>this is a div</div>}
        <button onClick={toggle}>toggle</button>
      </div>
    </>
  )
}

export default App
